<template>
	<view>
		<view class="flex align-c user">
			<image v-if="info && info.avator" :src="$img(info.avator)" mode="aspectFill" class="user_head_img" />
			<image v-else src="/static/head.png" mode="aspectFill" class="user_head_img" />
			<view class="f1">
				<view class="user_name" v-if="info && info.name">Hi~, {{ info.name }}</view>
				<view v-if="info && info.mobile">{{ $tel(info.mobile) }}</view>
			</view>
			<image src="/static/mine/qr-code.png" mode="aspectFill" style="width: 37rpx;height: 37rpx;" @click="openQrcode" />
		</view>
		
		<view class="box">
			<view class="label_title mb">课程审核</view>
			<view class="between align-c">
				<view class="grid_item" v-for="(v,i) in list" :key="i" @click="$to(`/pages/mine/course_review?type=${v.type}`)">
					<view v-if="v.num" class="grid_item_num">{{ v.num }}</view>
					<image :src="`/static/mine/${v.icon}.png`" mode="aspectFill" class="grid_icon" />
					<view class="grid-text">{{ v.title }}</view>
				</view>
			</view>
		</view>
		
		<view class="box" style="padding: 10rpx 27rpx;">
			<view class="between align-c item" v-for="(v,i) in mineList" :key="i" @click="$to(`/pages/mine/${v.path}`)">
				<view class="label_title">{{ v.name }}</view>
				<image src="/static/home/into-gray.png" mode="widthFix" class="into_icon" />
			</view>
		</view>
		
		<u-popup :show="show" :round="10" mode="center" @close="show=false">
			<view class="contract_box">
				<image v-if="qrimg" :src="imgUrl + qrimg" mode="widthFix" />
			</view>
		</u-popup>
		
		<tabbar :current="2" />
		<view class="place"></view>
	</view>
</template>

<script>
	import tabbar from '@/components/tabbar.vue'
	import config from '@/libs/config.js'
	export default {
		components: {
			tabbar
		},
		data() {
			return {
				list: [
					{
						icon: 'all-course',
						title: '全部',
						type: '',
					},
					{
						icon: 'under-review',
						title: '审核中',
						type: 1,
						num: 0,
					},
					{
						icon: 'rejected',
						title: '已驳回',
						type: 2,
						num: 0,
					},
					{
						icon: 'passed',
						title: '已通过',
						type: 3,
						num: 0,
					},
				],
				mineList: [
					{
						name: '用户评价',
						path: 'user_evaluation',
					},
					{
						name: '我的钱包',
						path: 'myWallet',
					},
					{
						name: '提现账号',
						path: 'withdrawal_account',
					},
					{
						name: '设置',
						path: 'set',
					}
				],
				shop_id: '',
				detail: null,
				info: null,
				show: false,
				qrimg: '',
				imgUrl: config.baseUrl,
			}
		},
		onLoad() {
			
		},
		onShow() {
			uni.hideTabBar();
			this.shop_id = uni.getStorageSync('shopId')
			this.getUserInfo();
		},
		methods: {
			async getUserInfo() {
				let res = await this.$api.get(`staff/my/index`);
				if(res.code == 200) {
					this.detail = res.data;
					this.info = res.data.info;
					this.watchInfo();
				}
			},
			watchInfo() {
				const {detail} = this;
				if(detail) {
					this.list[1].num = detail.checking;
					this.list[2].num = detail.reject;
					this.list[3].num = detail.pass;
				}
			},
			async openQrcode() {
				
				let res = await this.$api.post('staff/qrcode');
				if(res.code == 200) {
					this.qrimg = res.data.qrcode;
					this.show = true;
				}
			},
		}
	}
</script>

<style>
	page {
		background-color: #F7F7F7;
	}
</style>

<style lang="scss" scoped>
	.contract_box {
		background-image: linear-gradient(to left bottom,#FFF2E7,#F0FDFF);
		min-width: 360rpx;
		min-height: 360rpx;
		border-radius: 20rpx;
		image {
			width: 360rpx;
			height: 360rpx;
			border-radius: 20rpx;
		}
	}
.user {
	height: 400rpx;
	align-items: center;
	background-image: linear-gradient(to left bottom,#FFF2E7,#F0FDFF);
	padding: 0 33rpx;
	margin-bottom: -100rpx;
	font-size: 24rpx;
	color: #999999;
	&_head_img {
		width: 100rpx;
		height: 100rpx;
		border-radius: 50%;
		margin-right: 30rpx;
	}
	&_name {
		font-size: 36rpx;
		font-weight: bold;
		color: #333;
	}
}
.box {
	margin: 27rpx;
	border-radius: 13rpx;
	background-color: #FFF;
	padding: 25rpx 27rpx;
	font-size: 24rpx;
	.label_title {
		font-family: PingFang SC Bold;
		font-size: 28rpx;
		font-weight: bold;
	}
	.mb{
		margin-bottom: 30rpx;
	}
	.grid_item {
		padding: 0 10rpx;
		text-align: center;
		position: relative;
		&_num {
			min-width: 35rpx;
			min-height: 30rpx;
			text-align: center;
			align-items: center;
			border-radius: 50%;
			position: absolute;
			top: -10rpx;
			right: 0;
			font-size: 12rpx;
			background-color: #F51818;
			color: #FFF;
			z-index: 99;
		}
		.grid_icon {
			width: 47rpx;
			height: 47rpx;
		}
	}
	.into_icon {
		width: 11rpx;
		height: 20rpx;
	}
	.item {
		line-height: 80rpx;
	}
}

</style>
